<template>
  <button
    style="width: 100%"
    :type="type"
    :loading="loading"
    :disabled="disabled"
    :plain="plain"
    @click="submit"
  >
    <slot></slot> {{ title }}
  </button>
</template>

<script>
import { object } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";

export default {
  props: {
    title: {
      // 按钮名称
      type: String,
      default: "",
    },
    type: {
      // 按钮类型
      type: String,
      default: "primary",
    },
    loading: {
      // 按钮加载状态
      type: Boolean,
      default: false,
    },
    plain: {
      type: Boolean,
      default: false,
    },
    disabled: {
      // 按钮是否禁用
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    submit() {
      this.$emit("submit", "");
    },
  },
};
</script>

<style lang="scss">
button {
  width: 100%;
  height: 84rpx;
  background: #02b494;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  font-size: 32rpx;
  font-family: PingFang SC-Heavy, PingFang SC;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
button[type="primary"] {
  background: #02b494;
}
button[type="primary"][plain] {
  border-color: #02b494;
  color: #02b494;
}
</style>
